import { useState, useEffect } from 'react';

export const Counter = () => {
  const [count, setCount] = useState(0);
  // 第二个状态变量
  const [number, setNumber] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  const handleClick2 = () => {
    setNumber(number + 1);
  };

  // 副作用函数
  useEffect(() => {
    console.log('你的UI渲染完了吧');
    // 更新DOM了
    document.title = count;
  }, [count]);

  // 可以调用多次，组件第一次渲染完毕后执行
  useEffect(() => {
    console.log('第一次');
    const handleResize = () => {
      console.log('window resize');
    };
    // 这个要在组件销毁时去remove掉
    window.addEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>count+1</button>
      <h1>{number}</h1>
      <button onClick={handleClick2}>number+1</button>
    </div>
  );
};
